<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" ></script>
<title>js-2dmath: Demostration of various Intersections</title>

<script src="../dist/js-2dmath-browser.min.js" type="text/javascript" ></script>
<!--
<script src="../debug/js-2dmath-browser-debug.js" type="text/javascript" ></script>
-->

</head>
<body>
<h1>js-2dmath: NMTree (QuadTree)</h1>
<canvas id="canvas" width="680" height="680" style="border: 1px solid red;"></canvas>
<p>config: NMTree([-250, -250, 250, 250], 3, 2)<br />
Insert 250 boxes, and retrieve possible collision with the 25th (green boxes at the end)</p>
</body>
</html>

<script>
//
// --- INIT ---
//
//expose js-2dmath globally, I'm lazy!
require("js-2dmath").globalize(window);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//
// code
//

function randomAABB2() {
    //0.1 because must be inside, no colliding
    var x = Math.randRange(bounds[0] + 0.1, bounds[2] - 25.1),
    y = Math.randRange(bounds[1] + 0.1, bounds[3] - 25.1),
    w = Math.randRange(25, 5),
    h = Math.randRange(25, 5);

    return [x, y, x + w, y + h];
}

var bounds = AABB2.create(-250, -250, 250, 250),
    mqt = new NMtree(bounds, 10, 3, [3, 2]),
    MODE = "creation",
    retrieved_boxid = 25,
    retrieved_box;


console.log(AABB2.fromAABB2Division(bounds, 3, 2));

// random creation
var boxid = 0,
create_box_int = setInterval(function() {
    var test = randomAABB2();
    mqt.insert(test, ++boxid);

    if (boxid === retrieved_boxid) {
        retrieved_box = test;
    }

    if (boxid > 250) {
        MODE = "selection";
        clearInterval(create_box_int);
    }
}, 50);

Draw.Quadtree = function(ctx, qt, bcolor, ocolor) {
    Draw.aabb2(ctx, qt.bounds, bcolor);
    if (qt.objects) {
        qt.objects.forEach(function(obj) {
            Draw.aabb2(ctx, obj.bounds, ocolor);
        });
    }
};


var colors = {
  creation: [
    ["red", "purple"],
    ["rgb(255, 0, 0)", "rgb(200, 0, 0)"],
    ["rgb(0, 255, 0)", "rgb(0, 200, 0)"],
    ["rgb(0, 0, 255)", "rgb(0, 0, 200)"],
    ["rgb(255, 255, 0)", "rgb(200, 200, 0)"],
    ["rgb(0, 255, 255)", "rgb(0, 200, 200)"],
    ["rgb(255, 0, 255)", "rgb(200, 0, 200)"],
  ],
  selection: [["grey", "grey"]]
} ;

function update() {
    ctx.save();
    canvas.width = canvas.width;
    Draw.invertAxis(canvas, ctx); // y-up
    ctx.translate(canvas.width * 0.5, canvas.height * 0.5); // center
    Draw.cartesianAxis(ctx, 320, 16); // coordinates

    window.requestAnimFrame(update);

    var icolor = 0;

    mqt.iterate(function(qtree) {
        var bcolor = colors[MODE][icolor] ? colors[MODE][icolor][0] : "rgba(125, 125, 125, 0.5)";
        var ocolor = colors[MODE][icolor] ? colors[MODE][icolor][1] : "rgba(125, 125, 125, 0.5)";

        Draw.Quadtree(ctx, qtree, bcolor, ocolor);
        ++icolor;
    });


    if (MODE === "selection") {
        var oboxes = mqt.retrieve(retrieved_boxid);

        oboxes && oboxes.length && oboxes.forEach(function (obj) {
            Draw.aabb2(ctx, obj.bounds, "green");
        });

        Draw.aabb2(ctx, retrieved_box, "red");


    }


    //Draw.aabb2(ctx, test, "rgba(0, 255, 0, 1)");

    ctx.restore();
}
update();

</script>